<script setup lang="ts">
import Privacy from './Privacy.vue'
import Situation from './Situation.vue'
import { reactive, ref, watch, computed } from 'vue'

let currentIndex = ref(1)
let componentName = [0, Privacy, Situation]
const tabbar = (id: number) => {

    currentIndex.value = id
}


const itemList = reactive(
    [
        {
            id: 1,
            name: '信息设置',
            img: '/course/文章.svg'
        },
        {
            id: 2,
            name: '学情分析',
            img: '/course/知识.svg'
        }
    ]
)
</script>
    
<template>
    <div class="left">
        <div class="left_header">
            <img v-if="1" src="@/assets/man.svg" alt="">
            <div class="img" v-else>王</div>
            <div>游客用户</div>
        </div>
        <div class="left_main">
            <!-- <div class="box">
                <img src="/course/总人数.svg" alt="">
                <div style="margin:10px 0 ;">班级人数</div>
                <div>36</div>
            </div>
            <div class="box">
                <img src="/course/班主任.svg" alt="">
                <div style="margin:10px 0 ;">班主任</div>
                <div>何小民</div>
            </div>
            <div class="box">
                <img src="/course/班级信息.svg" alt="">
                <div style="margin:10px 0 ;">班级名称</div>
                <div>20软件1班</div>
            </div> -->
        </div>
        <div class="left_body">
            <ul class="bar">
                <li class="bar_item" :class="item.id == currentIndex ? 'active' : ''" v-for="item in itemList"
                    :key="item.id" @click="tabbar(item.id)">
                    <img :src="item.img" alt="">
                    {{ item.name }}
                </li>
            </ul>
        <img src="/插画/datashow.svg" alt="" id="img"/>
        </div>
    </div>
    <div class="center"></div>
    <div class="right">
        <!-- 动态组件显示不同页面 -->
        <component :is="componentName[currentIndex]"></component>
    </div>
</template>
    
<style scoped lang="scss">
.left {
    position: absolute;
    left: 0;
    width: 15%;
    height: 100%;
    box-shadow: 6px 6px 10px -1px rgba(0, 0, 0, 0.15),
        -6px -6px 10px -1px rgba(255, 255, 255, 0.7);

    &_header {
        height: 120px;
        font-family: 华文行楷;
        color: $blue-color;
        @include flex-column; //使用样式

        .img {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            background-color: yellow;
            line-height: 70px;
            text-align: center;
            font-size: 28px;

        }

        img {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            border: 2px solid #e3edf7;
            box-shadow: 6px 6px 10px -1px rgba(0, 0, 0, 0.15),
                -6px -6px 10px -1px rgba(255, 255, 255, 0.7);
        }
    }

    &_main {
        height: 120px;
        font-size: 12px;
        color: $fontcolor;
        @include flex; //使用样式

        .box {
            @include flex-column; //使用样式

            img {
                width: 30px;
                height: 30px;
            }
        }

    }

    &_body {
        .bar {
            padding-left: 0px;

            &_item {
                width: 85%;
                height: 56px;
                border-top-right-radius: 56px;
                border-bottom-right-radius: 56px;
                @include flex; //使用样式
                list-style: none;
                cursor: pointer;

                img {
                    width: 30px;
                    height: 30px;
                }

            }

            .active {
                transition: 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
                box-shadow: 6px 6px 10px -1px rgba(0, 0, 0, 0.15),
                    -6px -6px 10px -1px rgba(255, 255, 255, 0.7);
            }
        }
        #img{
            position: absolute;
            width: 100%;
            bottom: 0;
        }
    }
}

.right {
    position: absolute;
    right: 0;
    width: 80%;
    height: 100%;
    box-shadow: 6px 6px 10px -1px rgba(0, 0, 0, 0.15),
        -6px -6px 10px -1px rgba(255, 255, 255, 0.7);
}
</style>